<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运动商城 - 首页</title>
    <!-- CSS files -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/reset.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/style.css">
    <!-- Fix style issues with inline CSS -->
    <style>
        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            color: #333;
            background-color: #f8f9fa;
        }
        .navbar-nav {
            display: flex;
            flex-direction: row;
            padding-left: 0;
            margin-bottom: 0;
            list-style: none;
        }
        .navbar-nav .nav-link {
            padding-right: 0.5rem;
            padding-left: 0.5rem;
        }
        .nav-item {
            margin-right: 10px;
        }
        .carousel-item {
            height: 400px;
        }
        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .carousel-caption {
            background-color: rgba(0,0,0,0.4);
            padding: 15px;
            border-radius: 5px;
        }
        .category-card img, .product-img {
            height: 150px;
            object-fit: cover;
        }
        .container {
            width: 100%;
            padding-right: var(--bs-gutter-x, 0.75rem);
            padding-left: var(--bs-gutter-x, 0.75rem);
            margin-right: auto;
            margin-left: auto;
        }
        @media (min-width: 576px) {
            .container {
                max-width: 540px;
            }
        }
        @media (min-width: 768px) {
            .container {
                max-width: 720px;
            }
        }
        @media (min-width: 992px) {
            .container {
                max-width: 960px;
            }
        }
        @media (min-width: 1200px) {
            .container {
                max-width: 1140px;
            }
        }
        /* 提示框样式 */
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
        }
        .custom-toast {
            background: #fff;
            border-radius: 8px;
            padding: 15px 25px;
            margin-bottom: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            display: flex;
            align-items: center;
            gap: 10px;
            min-width: 280px;
            opacity: 0;
            transform: translateX(100%);
            transition: all 0.3s ease;
        }
        .custom-toast.show {
            opacity: 1;
            transform: translateX(0);
        }
        .custom-toast.success {
            border-left: 4px solid #28a745;
        }
        .custom-toast.error {
            border-left: 4px solid #dc3545;
        }
        .custom-toast i {
            font-size: 20px;
        }
        .custom-toast.success i {
            color: #28a745;
        }
        .custom-toast.error i {
            color: #dc3545;
        }
        .toast-message {
            margin: 0;
            font-size: 14px;
            color: #333;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <jsp:include page="common/header.jsp"/>
    
    <!-- 轮播图 -->
    <jsp:include page="common/banner_carousel.jsp"/>
    
    <!-- 热门分类 -->
    <section class="category-section py-5 bg-light">
        <div class="container">
            <h2 class="category-title mb-4">热门分类</h2>
            <div class="row">
                <c:forEach items="${categories}" var="category">
                    <div class="col-md-3 col-6">
                        <div class="category-card">
                            <a href="${pageContext.request.contextPath}/product/category/${category.id}">
                                <img src="${not empty category.image ? category.image : pageContext.request.contextPath.concat('/static/images/category-default.jpg')}" alt="${category.name}">
                                <h5>${category.name}</h5>
                            </a>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </section>
    
    <!-- 热门商品 -->
    <section class="product-section py-5">
        <div class="container">
            <h2 class="category-title mb-4">热门商品</h2>
            <div class="row">
                <c:forEach items="${hotProducts}" var="product">
                    <div class="col-lg-3 col-md-4 col-6">
                        <div class="product-card">
                            <a href="${pageContext.request.contextPath}/product/detail/${product.id}">
                                <img src="${not empty product.mainImage ? product.mainImage : pageContext.request.contextPath.concat('/static/images/product-default.jpg')}" alt="${product.name}" class="product-img">
                                <div class="product-info">
                                    <h5 class="product-name">${product.name}</h5>
                                    <p class="product-subtitle">${product.subtitle}</p>
                                    <div class="product-price">¥${product.price}</div>
                                </div>
                            </a>
                            <button class="btn btn-primary add-to-cart" data-product-id="${product.id}">加入购物车</button>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </section>
    
    <!-- 新品上市 -->
    <section class="product-section py-5 bg-light">
        <div class="container">
            <h2 class="category-title mb-4">新品上市</h2>
            <div class="row">
                <c:forEach items="${newProducts}" var="product">
                    <div class="col-lg-3 col-md-4 col-6">
                        <div class="product-card">
                            <a href="${pageContext.request.contextPath}/product/detail/${product.id}">
                                <img src="${not empty product.mainImage ? product.mainImage : pageContext.request.contextPath.concat('/static/images/product-default.jpg')}" alt="${product.name}" class="product-img">
                                <div class="product-info">
                                    <h5 class="product-name">${product.name}</h5>
                                    <p class="product-subtitle">${product.subtitle}</p>
                                    <div class="product-price">¥${product.price}</div>
                                </div>
                            </a>
                            <button class="btn btn-primary add-to-cart" data-product-id="${product.id}">加入购物车</button>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </section>
    
    <!-- 页脚 -->
    <jsp:include page="common/footer.jsp"/>
    
    <!-- 提示框容器 -->
    <div class="toast-container"></div>
    
    <!-- JavaScript files -->
    <script src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/static/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // 显示提示框函数
            function showToast(message, type) {
                var icon = type === 'success' ? 'check-circle' : 'exclamation-circle';
                var toast = $(
                    '<div class="custom-toast ' + type + '">' +
                    '<i class="fas fa-' + icon + '"></i>' +
                    '<p class="toast-message">' + message + '</p>' +
                    '</div>'
                );
                
                $('.toast-container').append(toast);
                
                // 触发重排以应用动画
                toast[0].offsetHeight;
                
                // 显示提示框
                setTimeout(function() {
                    toast.addClass('show');
                }, 50);
                
                // 3秒后隐藏并移除提示框
                setTimeout(function() {
                    toast.removeClass('show');
                    setTimeout(function() {
                        toast.remove();
                    }, 300);
                }, 3000);
            }
            
            // 加入购物车
            $('.add-to-cart').click(function() {
                var productId = $(this).data('product-id');
                var $button = $(this);
                
                // 禁用按钮防止重复点击
                $button.prop('disabled', true);
                
                $.ajax({
                    url: '${pageContext.request.contextPath}/cart/add',
                    type: 'POST',
                    data: {
                        productId: productId,
                        quantity: 1
                    },
                    success: function(response) {
                        // 直接显示成功提示，不做状态判断
                        showToast('已成功添加到购物车', 'success');
                    },
                    error: function() {
                        showToast('添加失败，请稍后再试', 'error');
                    },
                    complete: function() {
                        // 恢复按钮可点击状态
                        $button.prop('disabled', false);
                    }
                });
            });
        });
    </script>
</body>
</html> 